<template>
  <div class="v-simple-cropper">
    <slot>
      <button @click="upload">上传图片</button>
    </slot>
    <input class="file" ref="file" type="file" accept="image/*" @change="uploadChange">
    <div class="v-cropper-layer" ref="layer">
      <div class="layer-header">
        <button class="cancel" @click="cancelHandle">取消</button>
        <span class="cancel">{{message}}</span>
        <button class="confirm" @click="confirmHandle" :disabled="disabled">上传</button>
      </div>
      <img ref="cropperImg">
    </div>
  </div>
</template>

<script>
import { upload } from '@/service/config'
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
export default {
  name: 'v-simple-cropper',
  props: {
    initParam: Object,
    uploadHandle: {
      type: Function,
      default: () => {}
    }
  },
  data () {
    return {
      cropper: {},
      filename: '',
      disabled: false,
      message: ''
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    // 初始化裁剪插件
    init () {
      let cropperImg = this.$refs['cropperImg']
      this.cropper = new Cropper(cropperImg, {
        aspectRatio: 1 / 1,
        dragMode: 'move'
      })
    },
    // 点击上传按钮
    upload () {
      this.$refs['file'].click()
    },
    // 选择上传文件
    uploadChange (e) {
      let file = e.target.files[0]
      console.log(file)
      this.file = file
      this.filename = file['name']
      let URL = window.URL || window.webkitURL
      this.$refs['layer'].style.display = 'block'
      this.cropper.replace(URL.createObjectURL(file))
    },
    // 取消上传
    cancelHandle () {
      this.cropper.reset()
      this.$refs['layer'].style.display = 'none'
      this.$refs['file'].value = ''
    },
    // 确定上传
    confirmHandle () {
      let cropBox = this.cropper.getCropBoxData()
      let scale = this.initParam['scale'] || 1
      this.cropper.getCroppedCanvas({
        width: cropBox.width * scale,
        height: cropBox.height * scale
      }).toBlob((blob) => {
        this.disabled = true
        upload(this.initParam['uploadURL'], {
          file: blob
        }).then(async res => {
          this.message = '上传中请稍等...'
          this.disabled = false
          await this.uploadHandle(res.data)
          this.cancelHandle()
        }).catch(e => {
          this.disabled = false
          this.message = '上传失败'
          console.log(e)
        })
      }, 'image/png', 0.5)
    }
  }
}
</script>

<style lang="scss">
.v-simple-cropper {
  .file {
    display: none;
  }
  .v-cropper-layer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 99999;
    display: none;
    .layer-header {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 99999;
      background: #fff;
      width: 100%;
      height: 80px;
      padding: 0 30px;
      box-sizing: border-box;
      span {
        padding-left: 0.3rem;
        color: red;
      }
    }
    .cancel,
    .confirm {
      line-height: 80px;
      font-size: 28px;
      background: inherit;
      border: 0;
      outline: 0;
      float: left;
    }
    .confirm {
      float: right;
    }
    img {
      position: inherit !important;
      border-radius: inherit !important;
      float: inherit !important;
    }
  }
}
</style>
